<template>
  <el-dialog v-model="isVisible" v-bind="props">
    <section :class="props.isMaxHeight ? 'max-h-96' : ''">
      <slot :data="slotInfo"> </slot>
    </section>
    <template v-if="props.isFooter" #footer>
      <cl-button v-if="props.isCancel" @click="isVisible = false"
        >Cancel</cl-button
      >
      <cl-button v-if="props.isConfirm" type="primary" @click="handleConfirm">
        Confirm
      </cl-button>
      <slot name="footer"></slot>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { isType } from "@/utils/type";
import type { CLDialogProps, CLDialogAction } from "./types";

const isVisible = ref(false);
const slotInfo = ref();

const emits = defineEmits(["register", "confirm"]);
const props = ref<CLDialogProps>({
  isFooter: true,
  isCancel: true,
  isConfirm: true,
  isMaxHeight: true,
  /** 是否水平垂直对齐对话框 */
  alignCenter: true,
  /** 是否可以通过点击 modal 关闭 Dialog */
  closeOnClickModal: false,
  /** 是否可以通过按下 ESC 关闭 Dialog */
  closeOnPressEscape: false,
  /** 当关闭 Dialog 时，销毁其中的元素 */
  destroyOnClose: true,
  /** 为 Dialog 启用可拖拽功能 */
  draggable: true,
  /** 对话框的宽度，默认值为 50% */
  width: "45%",
  onClosed() {
    slotInfo.value = null;
  },
});

const dialogAction: CLDialogAction = {
  setProps(propsData: CLDialogProps) {
    /** Object.assign() 静态方法将一个或者多个源对象中所有可枚举的自有属性复制到目标对象，并返回修改后的目标对象。 */
    Object.assign(props.value, propsData);
  },
  setVisible(visible: boolean) {
    isVisible.value = visible;
  },
  setSlotData(slotData: any) {
    if (isType(slotData, "Void")) {
      console.warn(
        `%c setSlotData() 函数传递的值为 null 或 undefined ,请确定这是你想要的值`,
        "font-size:16px;"
      );
    }
    slotInfo.value = slotData;
  },
};

function handleConfirm() {
  emits("confirm");
}

onMounted(() => {
  emits("register", dialogAction);
});
</script>
